<svg id='text_svg'>
  <g id="txt" style="opacity: 0.2;"></g>
  <linearGradient
    id="gradient"
    gradientUnits="userSpaceOnUse"
    gradientTransform="rotate(0)"
    x2="800"
    y2="0"
  >
    <stop offset="0" stop-color="#FFFFFF" stop-opacity="0" />
    <stop offset="0.25" stop-color="#FFFFFF" stop-opacity="0.25" />
    <stop offset="1" stop-color="#FFFFFF" stop-opacity="1" />
  </linearGradient>
  <mask id="mask" maskUnits="userSpaceOnUse">
    <rect width="3000" height="3000" fill="url(#gradient)" />
  </mask>
  <use xlink:href="#txt" fill="#FFDD00" mask="url(#mask)" />
</svg>
<div class='wapper2'>
    <canvas id="projector"></canvas>
</div>
